<template>
  <div class="leftSideBar">
      <div class="top regular">
            <router-link to="/home" tag="div" class="fzjzt" style="cursor:pointer;">ZhuBaBa</router-link>
            <div class="topsss" v-if="isShow">
                <info></info>
            </div>
            
      </div>
      
      <!-- <div class="top regular">
          ZhuBaBa
      </div> -->
      <ul  class="list">
          <router-link class="regular" :to="item.path" tag="li" v-for="(item , index) in lists" :key="index" style="cursor: pointer;">
                <dl>
                    <dt>
                        <img v-if="item.path != $route.path" :src="item.url" >
                        <img v-else :src="item.urlOn" >
                    </dt>
                    <dd>
                        {{ item.name }}
                    </dd>
                </dl>
            </router-link>
            
      </ul>
      <div class="fot">
          <el-button type="primary" @click="logout" plain>退出登陆</el-button>
      </div>
  </div>
</template>

<script>

import img1 from "@/assets/images/backstage/zhzl.svg"
import img1On from "@/assets/images/backstage/zhzl_on.svg"

import img2 from "@/assets/images/backstage/qmjl.svg"
import img2On from "@/assets/images/backstage/qmjl_on.svg"

import img3 from "@/assets/images/backstage/ddjl.svg"
import img3On from "@/assets/images/backstage/ddjl_on.svg"

import img4 from "@/assets/images/backstage/zlsz.svg"
import img4On from "@/assets/images/backstage/zlsz_on.svg"

import img5 from "@/assets/images/backstage/no_my.png"
import img5On from "@/assets/images/backstage/my.png"

import img6 from "@/assets/images/backstage/share.png"
import img6On from "@/assets/images/backstage/share.png"

import info from "@/components/userInfo.vue"
export default {
    components:{
        info
    },
    data () {
        return {
            isShow:document.body.clientWidth < 750 ? true : false,
            lists:[
                    {
                        url:img1,
                        urlOn:img1On,
                        name:"账户总览",
                        path:"/info/zhzl"
                    },
                    {
                        url:img2,
                        urlOn:img2On,
                        name:"起名记录",
                        path:"/info/qmjl"
                    },
                    {
                        url:img3,
                        urlOn:img3On,
                        name:"付款记录",
                        path:"/info/fkjl"
                    },
                    {
                        url:img4,
                        urlOn:img4On,
                        name:"资料设置",
                        path:"/info/zlsz"
                    },
                    {
                        url:img5,
                        urlOn:img5On,
                        name:"我的名字",
                        path:"/info/my"
                    },
                    {
                        url:img6,
                        urlOn:img6On,
                        name:"分享赚佣金",
                        path:"/info/share"
                    },
                ]
        }
    },
    methods:{
        logout(){
            this.$ajax.post("/user/logout")
            .then(res=>{
                
                if(res.data.code == 0){
                    localStorage.clear();
                    this.$message({
                        type:"success",
                        message:"退出成功,即将跳转到登陆页"
                    });
                    setTimeout(()=>{
                        this.$router.push("/userLogin")
                    },1000)
                    
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>

.leftSideBar{
	width: 187px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    .fot{
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px 0 ;
    }
}

.leftSideBar .top{
	height: 80px;
	background: #405cda;
    font-size:24px;
    line-height: 80px;
	text-align: center;
	color: #fff;
	font-weight: bold;
    .topsss{
        display: none;
    }
}
.leftSideBar .list{
    padding: 22px 0;
    flex: 1;
    overflow: auto;
}
.leftSideBar .list li{
    margin-bottom: 12px;
    font-weight: bold;
}
.leftSideBar .list .active dd{
    color: #405cda;
}
.leftSideBar .list li dt{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
}
.leftSideBar .list li dt img{
	height: 32px;
}
.leftSideBar .list li dd {
	font-size: 16px;
	color: #c7d3ed;
	display: flex;
	align-items: center;
	justify-content: center;
}
@media screen and (max-width: 750px) {
    .leftSideBar{
        width: 100%;
        .top{
            display: flex;
            align-items: center;
            padding: 0 20px;
            justify-content: space-between;
            .topsss{
                display: block;
            }
            >div{
                font-size: 18px;
            }
        }
        .list{
            li{
                margin-bottom: 0;
                dl{
                    display: flex;
                    align-items: center;
                }
            }
        }
    }
}
</style>